import {
  primaryBackgroundColor2,
  primaryColor,
  secondaryColor,
} from '../../../theme/default';
import {useTranslation} from 'react-i18next';
import {TouchableOpacity, View, Text, Dimensions} from 'react-native';

import HistoryIcon from '../../../assets/icons/history.svg';
import ReceiveIcon from '../../../assets/icons/qr.svg';
import SendIcon from '../../../assets/icons/send.svg';

const {width} = Dimensions.get('window');

export function WalletBar({navigation}: any) {
  const {t} = useTranslation();
  return (
    <View
      style={{
        width: width - 32,
        justifyContent: 'space-evenly',
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor: primaryBackgroundColor2,
        borderRadius: 16,
        marginBottom: 12,
      }}>
      <TouchableOpacity
        style={{
          alignItems: 'center',
          flexDirection: 'column',
          width: 80,
          paddingTop: 12,
          paddingBottom: 12,
        }}
        onPress={() => navigation.navigate('Tokens', {type: 'Send'})}>
        <SendIcon width={32} height={32} color={primaryColor} />
        <Text style={{fontSize: 14, color: secondaryColor}}>{t('send')}</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          alignItems: 'center',
          flexDirection: 'column',
          width: 80,
          paddingTop: 12,
          paddingBottom: 12,
          borderRadius: 12,
          marginLeft: 20,
          marginRight: 20,
        }}
        onPress={() => navigation.navigate('Receive', {tokenInfo: undefined})}>
        <ReceiveIcon width={32} height={32} color={primaryColor} />
        <Text style={{fontSize: 14, color: secondaryColor}}>
          {t('receive')}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          alignItems: 'center',
          flexDirection: 'column',
          width: 80,
          paddingTop: 12,
          paddingBottom: 12,
          borderRadius: 12,
        }}
        onPress={() => navigation.navigate('History')}>
        <HistoryIcon width={32} height={32} color={primaryColor} />
        <Text style={{fontSize: 14, color: secondaryColor}}>
          {t('history')}
        </Text>
      </TouchableOpacity>
    </View>
  );
}
